<template>
    <div id="app">
      <nav>
        <!-- 导航按钮 -->
        <button
          :class="{ active: currentView === 'Game' }"
          @click="currentView = 'Game'"
        >
         Game
        </button>
        <button
          :class="{ active: currentView === 'ToDoList' }"
          @click="currentView = 'ToDoList'"
        >
          To-Do List
        </button>
      </nav>
      <!-- 动态组件 -->
      <div class="content">
        <component :is="currentView" />
      </div>
    </div>
  </template>
  
  <script>
  import Game from './components/game.vue';
  import ToDoList from './components/todo-list.vue';
  
  export default {
    name: 'App',
    components: {
      Game,
      ToDoList,
    },
    data() {
      return {
        currentView: 'Game', // 默认显示 Game 组件
      };
    },
  };
  </script>